<template>
    <div class="gouwucheader">
        <div>购物车</div>
        <div>
            <div>
                共<span>{{ numss }}</span>件商品
            </div>
            <div>
                编辑
            </div>
        </div>
    </div>
    <div class="shoucang" v-if="datas?.data?.length != 0">
        <div v-for="item, i in datas?.data" :key="i">
            <div>
                <input type="checkbox" v-model="item.checked">
            </div>
            <div>
                <img :src="item?.url" alt="">
            </div>
            <div>
                <div>{{ item?.title }}</div>
                <div>{{ item?.secondTitle }}</div>
                <div>￥<span>{{ item?.price }}</span> </div>
            </div>
            <div>
                <van-stepper v-model="item.nums" />
            </div>
        </div>
    </div>
    <div v-else>
        <van-empty description="你还没有添加商品到购物车" />
    </div>
    <div class="tijiaodinhgdan">
        <div>
            <div>
                选择全部
            </div>
            <div>
                <input type="checkbox" v-model="checked">
              
            </div>
        </div>
        <div>
            <div>
                付款金额
            </div>
            <div>
                ￥<span>{{ zongprice }}</span>
            </div>
        </div>
        <div>
            <div @click="zongprice ==0? show = false: show =true">
                结账
            </div>
        </div>
    </div>
    <BomNav :active="active"></BomNav>

    <van-popup v-model:show="show" closeable close-icon="close" position="bottom" :style="{ height: '80%' }">
        <div class="zhifuView">
            <div>确认订单</div>
            <div @click="showPopups">
                <div>
                    <van-icon name="location-o" />
                </div>
                <div>
                    {{ useraddresss.data.name }},{{ useraddresss.data.tel }},
                    {{ useraddresss.data.address }}
                </div>
                <div>
                    <van-icon name="arrow" />
                </div>

            </div>
            <div>
                <div>
                    {{ zongprice}}
                </div>
            </div>
            <div>
            </div>
            <div @click="adduserOder">
                立即支付
            </div>
            <!-- <div class="shoujitype">
                <div v-for="item in data.datas?.attributes.configs" :key="item.id">
                    <div>
                        {{ item.name }}
                    </div>
                    <div>
                        <div v-for="items in item.values" :key="item.id" :class="items.item == items.item ? 'active' : ''">
                            {{ items.item }}
                        </div>
                    </div>
                </div>
            </div> -->
        </div>

    </van-popup>
    <van-popup v-model:show="shows" closeable close-icon="close" position="bottom" :style="{ height: '80%' }">
        <div class="addressssss">
            <div v-for="item in useraddress.data" :key="item.id" @click="updateaddressid(item.id)">
                <div>
                    <van-icon name="location-o" />
                </div>
                <div>
                    {{ item.name }},{{ item.tel }},
                    {{ item.address }}
                </div>
                <div>
                    <van-icon name="arrow" />
                </div>

            </div>
        </div>
    </van-popup>
    <div style="height: 250rem;">

    </div>
</template>

<script setup lang="ts">
import BomNav from "@/components/BomNav.vue";
import { useStore } from 'vuex';
import { computed, reactive, ref, watch } from 'vue';
import { adduseroders, selectgouwuche, selectuseraddress } from '@/api/index'
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { removegouwuche } from '@/api/index'
import moment from "moment";
let checked = ref(false)
let active = ref(2)
let router = useRouter()
let store = useStore()
let datas = reactive({
    data: [] as any
})
const shows = ref(false);
const showPopups = () => {
    shows.value = true;
};
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const isshow = ref(false);
const isshowPopup = () => {
    isshow.value = true;
};

const nums = ref(1);
//购买商品
let adduserOder = () => {
    datas.data.forEach((items: any) => {
        if (items.checked) {
            let dates = moment().format('YYYY年MM月DD日 hh:mm:ss')
            let price: any = (items.price * items.nums).toFixed(0)
            let datssssss: any = new Date()
            let datastime: any = datssssss.getTime()
            adduseroders(store.state.userData[0].id, items.id, items.nums, price - 0, dates, addressid.value, datastime).then((result: any) => {
                showToast('购买成功')
                show.value = false
            }).catch((err: any) => {
                console.log(err);
            });
        }
    })


}

selectgouwuche(store.state.userData[0]?.id).then((result: any) => {
    console.log(result);
    datas.data = result.data.data
    datas.data.forEach((items: any) => {
        items.checked = false
    })
}).catch((err: any) => {
    console.log(err);
});
watch(checked, (newVal: any, oldVal: any) => {
    if (newVal) {
        datas.data.forEach((items: any) => {
            items.checked = true
        })
    }else{
        datas.data.forEach((items: any) => {
            items.checked = false
        })
    }
})
let zongprice = computed(() => {
    let nums = 0
    datas.data.forEach((items: any) => {
        if (items.checked) {

            nums += (items.nums - 0) * (items.price - 0)
        }
    })
    return nums
})

let numss = computed(() => {
    let nums = 0
    datas.data.forEach((items: any) => {
        if (items.checked) {

            nums += (items.nums - 0)
        }
    })
    return nums
})

let seleteListData = (data: any) => {
    router.push({
        path: `/xiangqing`
    })
    store.commit('updataxiangqingdata', data)
}

let removesc = (shoppingid: Number, index: Number) => {

    removegouwuche(store.state.userData[0].id, shoppingid).then((result: any) => {
        showToast('删除成功')
        let datass = [] as any
        console.log(datas.data);

        datas.data.forEach((element: any, i: Number) => {
            if (index != i) {
                datass.push(element)
            }
        });
        datas.data = datass
    }).catch((err: any) => {
        showToast('删除失败，网络出现了状况')
    });
}
let useraddresss = reactive({
    data: {} as any
})
let addressid: any = ref(0)
let useraddress = reactive({
    data: [] as any
})
//查看用户地址
selectuseraddress(store.state.userData[0].id).then((result: any) => {

    useraddress.data = result.data.data
    addressid.value = result.data.data[0].id
    useraddress.data.forEach((iten: any) => {
        if (iten.id == addressid.value) {
            useraddresss.data = iten

        }
    })

}).catch((err: any) => {
    console.log(err);
});

let updateaddressid = (id: Number) => {
    addressid.value = id
    shows.value = false
    useraddress.data.forEach((iten: any) => {
        if (iten.id == addressid.value) {
            useraddresss.data = iten

        }
    })
}
</script>

<style lang="less" scoped>
.tijiaodinhgdan {
    width: 100vw;
    background-color: #ffffff;
    padding-top: 20rem;
    padding: 15rem 0rem;
    border-radius: 20rem 20rem 0rem 0rem;
    position: fixed;
    bottom: 45rem;
    border-top: 1px dashed #C5C5C5;

    >div {
        width: 315rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    >div:nth-child(1) {
        font-size: 16rem;
        padding-bottom: 5rem;
        border-bottom: 1px dashed #C5C5C5;

        input {
            -webkit-appearance: none;
            width: 25rem;
            height: 25rem;
            background-color: #C5C5C5;
            border-radius: 5rem;
            border: none;
        }
        input:checked{
            background-color: #f83d3d;
            color: #ffffff;
        }

    }

    >div:nth-child(2) {
        margin-top: 15rem;

        >div:nth-child(1) {
            font-size: 16rem;
            font-weight: 600;
            color: rgb(0, 24, 25);
        }

        >div:nth-child(2) {
            font-size: 16rem;
            color: #FF7465;
        }
    }

    >div:nth-child(3) {
        margin-top: 20rem;
        width: 315rem;
        height: 45rem;
        color: #ffffff;
        font-size: 16rem;
        line-height: 45rem;
        background-color: #FF7465;
        border-radius: 20px;

        >div {
            margin: 0 auto;
        }
    }


}

.shoucang {
    >div {
        margin-top: 20rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        text-align: left;

        >div:nth-child(3) {
            width: 98rem;
            overflow: hidden;
        }

        img {
            width: 78rem;
            border-radius: 5rem;
        }

    }


}

.gouwucheader {
    padding-top: 30rem;
    border-bottom: 20rem solid #fdfbfb;

    >div:nth-child(1) {
        text-align: left;
        font-size: 16rem;
        font-weight: 600;
        margin-left: 20rem;

    }

    >div:nth-child(2) {

        width: 335rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 16rem;
        margin-top: 20rem;

    }

}

.addressssss {
    margin-top: 50rem;

    >div {
        margin-top: 15rem;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee8e8;
        border-top: 1px solid #eee8e8;
        padding-top: 10rem;
        padding-bottom: 10rem;

        >div {
            margin: 5rem;
            font-size: 14rem;
            font-weight: 600;

            i {
                font-size: 20rem;
            }
        }
    }

}

.zhifuView {
    width: 345rem;
    margin: 0 auto;


    >div:nth-child(1) {
        font-size: 18rem;
        font-weight: 600;
        width: 345rem;
        text-align: center !important;
        margin-top: 20rem;
        margin-bottom: 20rem;

    }

    >div:nth-child(2) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee8e8;
        border-top: 1px solid #eee8e8;
        padding-top: 10rem;
        padding-bottom: 10rem;

        >div {
            margin: 5rem;
            font-size: 14rem;
            font-weight: 600;

            i {
                font-size: 20rem;
            }
        }
    }

    >div:nth-child(3) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rem;

        >div:nth-child(1) {
            color: #f83d3d;
            font-size: 16rem;
        }
    }

    >div:nth-child(4) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 15rem;

        >span {
            display: block;
            line-height: 20rem;
            border-radius: 8rem;
            padding: 0rem 5rem;
            color: #cfc9c9;



        }
    }

    >div:nth-child(5) {
        width: 345rem;
        position: fixed;
        bottom: 0;
        text-align: center;
        height: 50rem;
        background-color: #f83d3d;
        border-radius: 25rem;
        color: #ffffff;
        font-size: 18rem;
        line-height: 50rem;
        font-weight: 700;
    }

}
</style>